<template>
	<view>
		<!-- 主页图片 -->
		<view>
			<!-- <image :src="img" mode="widthFix" style="width: 100%;"></image> -->
			<u--image :src="img" width="100%" height="250px"></u--image>
		</view>

		<!-- 个人信息区 -->
		<view style="margin-left:20px; margin-top: 10px; display: flex;">
			<!-- 头像 -->
			<view @click="iconChangeBarOpenSheet" style="position: relative; top: -50px; 
			width: 110px; height: 110px; background-color: white; border-radius: 55px;">
				<view class="u-demo-block" style="position: relative; top: 5px; left: 5px;">
					<view class="u-demo-block__content">
						<view class="u-page__image-item">
							<u--image shape="circle" :src="icon1" width="100px" height="100px">
								<template v-slot:loading>
									<u-loading-icon color="red"></u-loading-icon>
								</template>
							</u--image>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 用户信息 -->
			<view>
				<view style="margin-left: 20px;">
					<text style="font-size: 20px; font-weight: bold;">{{user.nickName}}</text>
				</view>
				<view style="margin-left: 22px;">
					<text style="font-size: 15px;">X天前来过蚂蚁</text>
				</view>
			</view>

		</view>

		<view style="margin:0 25px 0 25px; position: relative; top: -30px;">
			<!-- 个人简介 -->
			<view style="margin-bottom: 25px;">
				<text>{{pageOwner.sign}}</text>
			</view>

			<!-- 编辑资料按钮 -->
			<view v-show="user.id == pageOwner.id" style="">
				<button style="background-color: #f5fff0; font-weight: bold;" @click="bianji">编辑资料</button>
			</view>

			<!-- 滑块 -->
			<view>
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<u-tabs :list="list" lineWidth="30" lineColor="#53c21d" :activeStyle="{
						             color: '#303133',
						             fontWeight: 'bold',
						             transform: 'scale(1.05)'
						         }" :inactiveStyle="{
								 color: '#606266',
								 transform: 'scale(1)'
							}" @click="tabBarPage">
						</u-tabs>
					</view>
				</view>
			</view>

			<!-- 宝贝页 -->
			<view v-show="viewShow == 0">
				<baobei :getUserId="userId" ></baobei>
			</view>

			<!-- 帖子页 -->
			<view v-show="viewShow == 1">
				<tiezi :getUserId="userId"></tiezi>
			</view>

			<!-- 评价页 -->
			<view v-show="viewShow == 2">
				<pingjia></pingjia>
			</view>

		</view>
		

		<!-- <u-action-sheet
			:show="iconChangeBarShow"
			@select="selectOption"
			@close="iconChangeBarShow = false"
			:actions="iconChangeBarActions"
			cancelText="取消"
		>
		</u-action-sheet> -->
			

	</view>
</template>

<script>
	import baobei from '../UserBaoBeiPage/UserBaoBeiPage.vue'
	import tiezi from '../UserTieZiPage/UserTieZiPage.vue'
	import pingjia from '../UserPingJiaPage/UserPingJiaPage.vue'

	export default {
		components: {
			baobei,
			tiezi,
			pingjia
		},
		data() {
			return {
				userId: '',
				viewShow: '0',
				
				img: 'https://img0.baidu.com/it/u=3569066416,3506148795&fm=253&fmt=auto&app=138&f=JPEG?w=875&h=500',
				icon1: '',
				pageOwner: {
					// id: '100000',
					// nickName: '用户123456',
					// icon: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// sign: '这家伙很神秘，没有写个人简介。',
				},
				user: {
					// id: '100000',
					// nickName: '用户123456',
					// icon: 'https://cdn.uviewui.com/uview/album/1.jpg'
				},
				goods: [],
				list: [{
					name: '宝贝'
				}, {
					name: '帖子',
				}, {
					name: '评价',
				}],
				iconChangeBarShow: false,
				iconChangeBarActions: [{
						name: '更换头像',
					}
				],
			}
		},
		onLoad: function(option) {
			this.userId = option.userId;
			// console.log(this.pageId)
			// 获取用户信息
			let that = this;
			uni.getStorage({
				key: 'user',
				success(res) {
					that.user = res.data;
				}
			})
			// 获取页面的用户信息
			uni.request({
				method: 'GET',
				url: getApp().globalData.url + '/user/getPageOwnerInfoByUserId?userId=' + that.userId,
				success(res) {
					that.pageOwner = res.data;
					console.log(that.pageOwner)
					that.icon1 = that.pageOwner.icon
				}
			})
			
			setTimeout(() => {
				this.icon1 = this.pageOwner.icon
			}, 100);
		},
		methods: {
			tabBarPage(item) {
				this.viewShow = item.index;
			},
			bianji(){
				uni.navigateTo({
					url:'/pages/UserBianJiPage/UserBianJiPage'
				})
			},
			// 变更头像上拉菜单显示/隐藏
			iconChangeBarOpenSheet() {
				this.iconChangeBarShow = true;
			},
			// 上拉菜单选择
			selectOption(e) {
				// console.log(e.name)
				
			},
			
		}
	}
</script>

<style>

</style>